﻿import React from 'react';
import { Card, Table, Icon } from 'antd';
import {connect} from 'react-redux'
import {hashHistory} from 'react-router'
import './index.css'
import { notificationMarkReaded } from '../../actions'

/**
 * 定义Header组件, 包括登录/注销的链接, 以及一些自定义链接
 */
class Notification extends React.Component {

  constructor(props){
    super(props);
  }

  componentWillMount () {

  }

  notificationClick(action, record) {
    hashHistory.push({ pathname: action, state: { studentId:record.param, mode:'Edit'}});
  }

  onMarkAllReaded() {
    let { notifications } = this.props;
    const ids = Array.from(notifications, value => value.id);
    ids.length > 0 && this.props.dispatch(notificationMarkReaded.request()({ids}))
  }

  render() {
    let { notifications } = this.props;
    const columns = [{
      title: '时间',
      dataIndex: 'descTime',
      key: 'time',
      width:'10%',
    }, {
      title: '干什么',
      dataIndex: 'title',
      key: 'title',
      width:'80%',
    },
      {
        title: 'action',
        dataIndex: 'action',
        key: 'action',
        width:'10%',
        render:(action, record) => {
          return <a onClick={this.notificationClick.bind(this, action, record)}>查看</a>
        }
      }];
    return (
    <div className="ant-card ant-card-loading ant-card-bordered" >
      <div className="ant-card-head">
        <h3 className="ant-card-head-title">通知</h3>
      </div>
      <div className="ant-card-extra"><a onClick={this.onMarkAllReaded.bind(this)}>全部标记为已读</a></div>
      <Table dataSource={notifications} columns={columns} showHeader={false}/>
    </div>
    );
  }

}

function mapStateToProps(state) {
  return {
    notifications: state.notification.data
  };
}

export default connect(mapStateToProps)(Notification)
